<template>
	<view class="address-add-container bottom-index">
		<!-- #ifdef MP-WEIXIN -->
		<qmy-custom-navbar :title="'编辑地址'"></qmy-custom-navbar>
		<!-- #endif -->
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- 内容区域 -->
		<view class="content" :style="{paddingTop:menuObject.top + menuObject.height +20 + 'px'}">
			<!-- 板块一：收货人和手机号 -->
			<view class="form-block">
				<!-- 收货人 -->
				<view class="form-item">
					<view class="item-label">收货人</view>
					<view class="input-container">
						<input class="input-field" type="text" v-model="formData.name" placeholder="请填写收货人姓名" />
					</view>
				</view>

				<!-- 手机号 -->
				<view class="form-item no-border">
					<view class="item-label">手机号</view>
					<view class="phone-input-wrap">
						<view class="area-code">
							+86
							<text class="iconfont ic-you fs-32"></text>
						</view>
						<input class="input-field" type="number" v-model="formData.mobile" placeholder="请填写收货人手机号" />
					</view>
				</view>
			</view>

			<!-- 板块二：地区选择和详细地址 -->
			<view class="form-block ping-10">
				<!-- 地址选择方式 -->
				<view class="address-select-tabs ">
					<view class="tab-item" :class="{'active': addressSelectMode === 'map'}"
						@click="addressSelectMode = 'map'">
						地图选址
					</view>
					<view class="tab-item" :class="{'active': addressSelectMode === 'region'}"
						@click="addressSelectMode = 'region'">
						地区选址
					</view>
				</view>

				<!-- 地区/地图展示 -->
				<view class="map-container" v-if="addressSelectMode === 'map'">
					<view class="form-item">
						<view class="item-label">地址</view>
						<view class="input-container location-input" @click="chooseLocation">
							<text class="placeholder-text" v-if="!formData.formatted_address">选择收货地址</text>
							<text class="location-text" v-else>{{formData.formatted_address}}</text>
							<text class="iconfont ic-you fs-32"></text>
						</view>
					</view>
				</view>

				<view v-else>
					<!-- 所在地区 - 选择省市区 -->
					<view class="form-item" @click="areaChoose">
						<view class="item-label">所在地区</view>
						<view class="region-picker">
							<text v-if="formData.province" class="selected-text">
								{{formData.province}} {{formData.city}} {{formData.district}}
							</text>
							<text v-else class="placeholder-text">省、市、区</text>
							<text class="iconfont ic-you fs-32"></text>
						</view>
					</view>
				</view>

				<!-- 详细地址/门牌号 -->
				<view class="form-item no-border">
					<view class="item-label">{{addressSelectMode === 'map' ? '门牌号' : '详细地址'}}</view>
					<view class="textarea-container">
						<textarea class="address-textarea" v-model="formData.address"
							:placeholder="addressSelectMode === 'map' ? '例：6栋201室' : '小区、门牌号'" />
					</view>
				</view>

				<!-- 地址粘贴板 -->
				<view>
					<view class="paste-input-area" v-if="showPasteBoard">
						<textarea class="paste-hint" v-model="pasteText"
							placeholder="试试粘贴收件人姓名、手机号、收货地址，可快速识别您的收货信息"></textarea>
						<view class="paste-analyze-btn" @click="analyzePastedText">识别</view>
					</view>
					<view class="address-paste-btn" @click="togglePasteBoard">
						地址粘贴板
						<text class="iconfont fs-32 ml-5" :class="showPasteBoard?'ic-xia':'ic-shang'"></text>
					</view>
				</view>
			</view>

			<!-- 板块三：标签和默认地址 -->
			<view class="form-block">
				<!-- 设为默认地址 -->
				<view class="form-item default-switch">
					<view class="default-switch-row">
						<view class="item-label">设为默认地址</view>
						<switch @change="formData.is_default = $event.detail.value" color="#14cc60"
							:checked="formData.is_default" />
					</view>
					<view class="hint-text">提醒：下单时会优先使用该地址</view>
				</view>

				<!-- 地址标签 -->
				<view class="form-item no-border">
					<view class="item-label">标签</view>
					<view class="tags-container">
						<view v-for="(tag, index) in addressTags" :key="index" class="tag-btn"
							:class="{'active': formData.alias === tag}" @click="selectTag(tag)">
							{{tag}}
						</view>
						<view v-if="!showCustomInput" class="tag-btn custom-tag-btn" @click="showCustomInput = true">
							自定义
						</view>
						<view v-if="showCustomInput" class="tag-btn custom-input-container">
							<input type="text" v-model="customTag" placeholder="自定义" maxlength="4" @blur="addCustomTag"
								@confirm="addCustomTag" focus class="custom-input" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部确认按钮 -->
		<view class="w-100 fixed-bottom bac-col-00b" @click="saveAddress">
			<view class="w-100 bg-col-00b text-ali-c">
				<view class="fs-30 col-f fw-600">修改地址</view>
			</view>
		</view>
		<!-- 省市区组件，组件地址：https://ext.dcloud.net.cn/plugin?id=4189 -->
		<area-choose ref='areaChoose' @areaComplete='onRegionChange'></area-choose>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				addressSelectMode: 'map', // 'map' 或 'region'
				formData: {
					name: '',
					mobile: '',
					mobile_area_code: '86',
					province: '',
					city: '',
					district: '',
					province_code: '',
					city_code: '',
					area_code: '',
					address: '',
					formatted_address: '',
					zip_code: '',
					is_default: false,
					alias: ''
				},
				// 通讯录显示相关
				showAddressBookIcon: true,
				// 地址粘贴板相关
				showPasteBoard: false,
				pasteText: '',
				// 标签相关
				addressTags: ['常用', '学校', '家', '公司'],
				showCustomInput: false,
				customTag: '',
				addressId: '',
				dataLoaded: false // 数据是否加载完成
			}
		},
		onLoad(options) {
			if (options.id) {
				this.addressId = options.id;
				this.getAddressDetail();
			}
		},
		methods: {
			// 获取地址详情
			getAddressDetail() {
				this.$Route('get-private-data', true).getAddressDetail(this.addressId).then(res => {
					this.formData = res.data[0];
					this.parseRegion(this.formData.formatted_address)
					this.dataLoaded = true;
				}).catch(err => {
					this.dataLoaded = true;
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						} else {
							this.$NavigateBack()
						}

					}, 1000);
				});
			},

			// 市区选择
			areaChoose() {
				this.$refs.areaChoose.show()
			},

			// 地图选择地址
			chooseLocation() {
				if (this.addressSelectMode === 'map') {
					uni.authorize({
						scope: 'scope.userLocation',
						success: () => {
							uni.chooseLocation({
								success: (res) => {
									if (res.address) {
										this.parseRegion(res.address, res.name)
									} else {
										this.$Toast('选点失败，请重试')
									}
								},
								fail: (err) => {
									console.log(err)
								}
							})
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
			},

			// 地区选择器变化
			onRegionChange(e) {
				this.formData.province_code = e.proCode;
				this.formData.city_code = e.cityCode;
				this.formData.area_code = e.disCode;
				this.formData.province = e.province;
				this.formData.city = e.city;
				this.formData.district = e.district;
				this.formData.formatted_address = e.address;
			},

			// 切换显示地址粘贴板
			togglePasteBoard() {
				this.showPasteBoard = !this.showPasteBoard;
			},

			// 分析粘贴的文本
			analyzePastedText() {
				if (!this.pasteText.trim()) {
					this.$Toast('请先粘贴内容');
					return;
				}

				this.$Toast('正在识别...');

				// 解析粘贴文本
				const text = this.pasteText.trim();
				let name = '';
				let mobile = '';
				let region = '';
				let address = '';

				// 尝试识别三种格式
				// 格式1: 带标签格式（收件人/手机号码/所在地区/详细地址）
				const format1NameMatch = text.match(/收件人[:：\s]*([\u4e00-\u9fa5]{1,5}[\u4e00-\u9fa5·]*(先生|女士|小姐)?)/);
				const format1MobileMatch = text.match(/手机号码[:：\s]*(\d{11})/);
				const format1RegionMatch = text.match(
					/所在地区[:：\s]*([\u4e00-\u9fa5]+(省|自治区|市)?([\u4e00-\u9fa5]+市)?([\u4e00-\u9fa5]+区|县)?)/);
				const format1AddressMatch = text.match(/详细地址[:：\s]*([\S\s]+?)(?=\n|$)/);

				// 格式2: 带冒号格式（收货人：/手机号：/所在地区：/详细地址：）
				const format2NameMatch = text.match(/收货人[:：\s]*([\u4e00-\u9fa5]{1,5}[\u4e00-\u9fa5·]*(先生|女士|小姐)?)/);
				const format2MobileMatch = text.match(/手机号[:：\s]*(\d{11})/);
				const format2RegionMatch = text.match(
					/所在地区[:：\s]*([\u4e00-\u9fa5]+(省|自治区|市)?([\u4e00-\u9fa5]+市)?([\u4e00-\u9fa5]+区|县)?)/);
				const format2AddressMatch = text.match(/详细地址[:：\s]*([\S\s]+?)(?=\n|$)/);

				// 格式3: 空格分隔格式（姓名 手机号 地区 详细地址）
				// 修正正则表达式以匹配多种可能的模式
				const format3Matches = text.match(
					/^([\u4e00-\u9fa5]{1,5}[\u4e00-\u9fa5·]*(先生|女士|小姐)?)\s+(\d{11})\s+([\u4e00-\u9fa5]+(省|自治区|市)?([\u4e00-\u9fa5]+市)?([\u4e00-\u9fa5]+区|县)?)\s+([\S\s]+)$/
				);

				// 优先使用格式1的匹配结果
				if (format1NameMatch && format1MobileMatch && format1RegionMatch && format1AddressMatch) {
					name = format1NameMatch[1];
					mobile = format1MobileMatch[1];
					region = format1RegionMatch[1];
					address = format1AddressMatch[1];
				}
				// 然后尝试格式2
				else if (format2NameMatch && format2MobileMatch && format2RegionMatch && format2AddressMatch) {
					name = format2NameMatch[1];
					mobile = format2MobileMatch[1];
					region = format2RegionMatch[1];
					address = format2AddressMatch[1];
				}
				// 最后尝试格式3
				else if (format3Matches) {
					name = format3Matches[1];
					mobile = format3Matches[3];
					region = format3Matches[4];
					address = format3Matches[8];
				}
				// 如果三种格式都不匹配，尝试提取基本信息
				else {
					// 尝试提取手机号 (11位数字)
					const mobileMatch = text.match(/\d{11}/);
					if (mobileMatch) {
						mobile = mobileMatch[0];
					}

					// 尝试提取姓名（假设姓名在文本开头或手机号前后，且是2-5个中文字符后面可能跟着先生/女士/小姐）
					const nameMatch = text.match(/(^|[\s,，:：])([\u4e00-\u9fa5]{1,5}[\u4e00-\u9fa5·]*(先生|女士|小姐)?)/);
					if (nameMatch) {
						name = nameMatch[2];
					}

					// 尝试提取地区（包含省/市/区/县等关键词的部分）
					const regionMatch = text.match(
						/([\u4e00-\u9fa5]+(省|自治区|市)[\u4e00-\u9fa5]+(市|区|县)?[\u4e00-\u9fa5]*(区|县)?)/);
					if (regionMatch) {
						region = regionMatch[1];
					}

					// 剩余部分可能是详细地址
					if (name && mobile && region) {
						// 从文本中找到地址部分，通常在地区之后
						const addressStartIndex = text.indexOf(region) + region.length;
						if (addressStartIndex < text.length) {
							address = text.slice(addressStartIndex).trim().replace(/^[,，:：\s]+/, '');
						}
					}
				}

				// 如果成功提取了信息，则填充表单
				if (name && mobile) {
					this.formData.name = name;
					this.formData.mobile = mobile;

					// 根据当前选择的地址模式处理地址信息
					this.parseRegion(region, address);

					this.$Toast('识别成功');
					this.showPasteBoard = false;
				} else {
					this.$Toast('识别失败，请检查格式或手动填写');
				}
			},

			// 解析地区信息
			parseRegion(region, detailAddress) {
				// 检查是否是直辖市
				const directCities = ['北京市', '上海市', '天津市', '重庆市', '北京', '上海', '天津', '重庆'];
				const isDirectCity = directCities.some(city => region.includes(city));

				// 对直辖市进行特殊处理
				if (isDirectCity) {
					// 直辖市处理：省份和城市相同
					const cityName = region.match(/(北京|上海|天津|重庆)(市)?/)[0];
					const cleanCityName = cityName.replace(/(市)$/, '') + '市'; // 确保以"市"结尾

					// 设置省份和城市为同一值
					this.formData.province = cleanCityName;
					this.formData.city = cleanCityName;

					// 尝试提取区县信息
					const districtMatch = region.match(/(?:北京|上海|天津|重庆)(?:市)?([^市]+(?:区|县|镇))/);
					if (districtMatch) {
						this.formData.district = districtMatch[1];
					} else {
						// 尝试另一种匹配方式
						const otherDistrictMatch = region.match(/(?:市)([^市]+(?:区|县))/);
						if (otherDistrictMatch) {
							this.formData.district = otherDistrictMatch[1];
						}
					}
				} else {
					// 非直辖市处理
					// 更准确的省市区解析
					const provinceMatch = region.match(/([\u4e00-\u9fa5]+)(省|自治区)/);
					const cityMatch = region.match(/(?:省|自治区)?([^省自治区]+)(市)/);
					const districtMatch = region.match(/(?:市)([^市]+)(区|县|镇)/);

					if (provinceMatch) {
						this.formData.province = provinceMatch[0];
					}

					if (cityMatch) {
						// 确保我们只获取城市名称，不包含前面可能的省份
						this.formData.city = cityMatch[1] + cityMatch[2];
					}

					if (districtMatch) {
						// 确保我们只获取区县名称，不包含前面可能的市
						this.formData.district = districtMatch[1] + districtMatch[2];
					}
				}

				// 如果无法准确匹配，尝试简单拆分
				if (!this.formData.province && !this.formData.city && !this.formData.district) {
					// 简单拆分，假设格式为"省市区"，考虑直辖市情况

					// 处理可能的直辖市格式
					for (const city of ['北京市', '上海市', '天津市', '重庆市', '北京', '上海', '天津', '重庆']) {
						if (region.includes(city)) {
							const cleanCity = city.replace(/(市)$/, '') + '市';
							this.formData.province = cleanCity;
							this.formData.city = cleanCity;

							// 提取区县信息
							const parts = region.split(city).filter(Boolean);
							if (parts.length > 0) {
								this.formData.district = parts[0].trim().replace(/^市/, '');
							}

							// 已处理完直辖市，结束这部分处理
							break;
						}
					}

					// 如果不是直辖市或未匹配到区县，使用通用拆分
					if (!this.formData.province) {
						const parts = region.replace(/省|自治区|市|区|县|镇/g, match => match + '|').split('|').filter(Boolean);
						if (parts.length >= 1) this.formData.province = parts[0];
						if (parts.length >= 2) this.formData.city = parts[1];
						if (parts.length >= 3) this.formData.district = parts[2];
					}
				}
				this.formData.province_code = '';
				this.formData.city_code = '';
				this.formData.area_code = '';
				// 设置详细地址
				if (detailAddress) {
					this.formData.address = detailAddress.trim();
				}

				// 设置格式化地址
				this.formData.formatted_address = [
					this.formData.province || '',
					this.formData.city || '',
					this.formData.district || ''
				].filter(Boolean).join('');
			},

			// 选择标签
			selectTag(tag) {
				this.formData.alias = this.formData.alias === tag ? '' : tag;
			},

			// 添加自定义标签
			addCustomTag() {
				if (this.customTag.trim()) {
					// 检查标签是否已存在
					if (!this.addressTags.includes(this.customTag.trim())) {
						this.addressTags.push(this.customTag.trim());
					}
					this.formData.alias = this.customTag.trim();
					this.customTag = '';
				}
				this.showCustomInput = false;
			},

			// 保存地址
			saveAddress() {
				// 表单验证
				if (!this.formData.name) {
					return this.$Toast('请填写收货人姓名');
				}

				if (!this.formData.mobile) {
					return this.$Toast('请填写手机号');
				}

				if (this.addressSelectMode === 'region') {
					if (!this.formData.province || !this.formData.city || !this.formData.district) {
						return this.$Toast('请选择所在地区');
					}
				} else {
					if (!this.formData.formatted_address) {
						return this.$Toast('请选择收货地址');
					}
				}

				if (!this.formData.address) {
					return this.$Toast(this.addressSelectMode === 'map' ? '请填写门牌号' : '请填写详细地址');
				}

				// 验证手机号格式
				const mobileRegex = /^\d{11}$/;
				if (this.formData.mobile_area_code === '86' && !mobileRegex.test(this.formData.mobile)) {
					return this.$Toast('手机号格式不正确');
				}

				// 保存地址
				this.$Route('update-private-data').editAddress(this.addressId, this.formData).then(res => {
					this.$Toast(res.msg);
					this.getOpenerEventChannel().emit('refreshData', '')
					setTimeout(() => this.$NavigateBack(), 1000)
				}).catch(err => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-add-container {
		min-height: 100vh;
		background-color: #f7f7f7;
		position: relative;
	}

	.content {
		padding: 0 30rpx;
	}

	.form-block {
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.form-item {
		padding: 24rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;


		.item-label {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 10rpx;
			font-weight: 500;
		}

		.input-container {
			display: flex;
			align-items: center;

			.input-field {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			&.location-input {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.placeholder-text {
			color: #b2b2b2;
			font-size: 28rpx;
		}

		.selected-text,
		.location-text {
			font-size: 28rpx;
			color: #333;
		}

		.arrow-right {
			font-size: 26rpx;
			color: #b2b2b2;
			margin-left: 10rpx;
		}

		// 手机号输入区域
		.phone-input-wrap {
			display: flex;
			align-items: center;

			.area-code {
				min-width: 100rpx;
				padding-right: 20rpx;
				font-size: 30rpx;
				color: #333;
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				.arrow-down {
					font-size: 26rpx;
					color: #b2b2b2;
					margin-left: 8rpx;
				}
			}

			.input-field {
				flex: 1;
				height: 55rpx;
				font-size: 28rpx;
				color: #333;
			}
		}

		// 地区选择器
		.region-picker {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 55rpx;
		}

		// 文本域容器
		.textarea-container {
			.address-textarea {
				width: 100%;
				height: 100rpx;
				font-size: 28rpx;
				line-height: 1.5;
				color: #000000;
			}
		}

		// 默认地址开关
		&.default-switch {
			padding-bottom: 30rpx;

			.default-switch-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.hint-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	// 地址选择标签页
	.address-select-tabs {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;

			&.active {
				color: #333;
				font-weight: 500;
				background-color: #fff;
			}

			.small-text {
				font-size: 24rpx;
				color: #999;
				margin-left: 5rpx;
			}
		}
	}

	// 当前定位
	.current-location {
		margin: 20rpx 0rpx;
		margin-bottom: 0rpx;
		padding: 20rpx;
		border-radius: 24rpx;
		background: #f7f7f7;

		.location-header {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.current-text {
				font-size: 28rpx;
				color: #333;
			}

			.location-name {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			.use-btn {
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #ffffff;
				color: #333;
				font-size: 24rpx;
				border-radius: 12rpx;
			}
		}

		.location-address {
			font-size: 24rpx;
			color: #999;
		}
	}

	// 地址粘贴板按钮
	.address-paste-btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #ffffff;
		color: #333;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 粘贴输入区域
	.paste-input-area {
		background-color: #f5f5f5;
		margin-top: 24rpx;
		border-radius: 20rpx;
		padding: 24rpx 30rpx;

		.paste-hint {
			font-size: 28rpx;
			color: #000000;
			width: 100%;
			height: 120rpx;
			line-height: 1.5;
		}

		.paste-textarea {
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
			padding: 20rpx;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
		}

		.paste-analyze-btn {
			margin-top: 20rpx;
			width: 160rpx;
			height: 55rpx;
			line-height: 55rpx;
			text-align: center;
			background-color: #ffffff;
			color: #000000;
			font-size: 26rpx;
			margin-left: auto;
			border-radius: 12rpx;
		}
	}

	// 标签容器
	.tags-container {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;

		.tag-btn {
			height: 60rpx;
			width: 22%;
			text-align: center;
			line-height: 60rpx;
			background-color: #f5f5f5;
			color: #666;
			font-size: 26rpx;
			border-radius: 8rpx;
			margin-right: 3%;
			margin-bottom: 20rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}

			&.active {
				background-color: #e6f8ee;
				color: #14cc60;
			}

			&.custom-tag-btn {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&.custom-input-container {
				padding: 0 10rpx;
				box-sizing: border-box;

				.custom-input {
					width: 100%;
					height: 100%;
					text-align: center;
				}
			}
		}
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx !important;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)) !important;
		z-index: 9999;
		transition: background-color 0.2s ease;
	}

	.fixed-bottom:active {
		background-color: #11b051 !important;
		/* 点击时背景颜色变化 */
	}

	// 区号选择弹窗
	.area-code-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.popup-content {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;

			.popup-header {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 1rpx solid #f0f0f0;

				text {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}

				.close-btn {
					font-size: 28rpx;
					color: #666;
				}
			}

			.area-code-list {
				max-height: 600rpx;

				.area-code-item {
					display: flex;
					padding: 30rpx;
					border-bottom: 1rpx solid #f0f0f0;

					text {
						font-size: 28rpx;
						color: #333;
						margin-right: 20rpx;
					}

					&:active {
						background-color: #f8f8f8;
					}
				}
			}
		}
	}
</style>